<template>
  <div class="bingMobile" style="position:absolute;top:0px;width:100%;">
    <group style="margin-bottom:.5rem;margin-top:.5rem;">
      <x-input title="" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile" v-model="phone"></x-input>
    </group>
    <group style="margin-bottom:1rem;">
      <x-input  class="weui-vcode" placeholder="短信验证码" v-model="vcode">
        <x-button slot="right"  mini plain type="primary" @click.native="sendInfo" :disabled="isSend">获取验证码 {{isSend?count+'s':''}}</x-button>
      </x-input>
    </group>
    <div class="info">
      <p>• 绑定手机号码可以获取优惠券</p>
      <x-button @click.native="handleSubmitBindMobile">立刻绑定</x-button>
    </div>
    <div class="show_coupon">
      <div class="weui-mask" :style="show_modal"></div>
      <div class="weui-dialog show_content" :style="show_modal">
        <img :src="coupon_img" alt="绑定成功" style="width:100%;height:100%;">
        <div class="coupon_content">
          <span v-if="type===1">
            ¥ {{value}}
          </span>
          <span v-if="type===2">
            {{value}}折
          </span>
          <div class="desc_right">
            <strong>{{name}}</strong>
            <p>{{description}}</p>
            <p>{{date}}</p>
          </div>
        </div>
        <div class="coupon_button">
          <img :src="binddone" alt="绑定按钮" @click="handleDone">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {Group,XInput,XButton,dateFormat} from 'vux'
import {getStore,setStore} from '@/config/mUtils'
import { mapActions } from 'vuex'
export default {
  name: 'bindMobile',
  data() {
    return {
      count: 59,
      interval: null,
      isSend: false,
      phone: '',
      vcode: '',
      show_modal: 'display:none',
      coupon_img: require('@/assets/fetch_coupon.png'),
      binddone: require('@/assets/binddone.png'),
      type: null,
      name: '',
      description: '',
      date: null,
      value: null
    }
  },
  created(){
    this.phone = this.$route.query.phone
  },
  components: {
    Group,
    XInput,
    XButton
  },
  methods: {
    ...mapActions([
			'setBindPhone'
		]),
    sendInfo(){
      if(this.phone.trim() !== ''){
        if(this.phone.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/)){
          this.isSend = true
          this.interval = setInterval(() => {
            this.count -= 1;
            if (this.count === 0) {
              clearInterval(this.interval);
              this.count = 59;
              this.isSend = false;
            }}, 1000);
          this.$http.get(`/user/cellphone/${this.phone}/openId/${getStore('wxcode')}/smscode/get`)
            .then(res=>{
              console.log('成功');
            }).catch(err=>{
              this.$vux.toast.show({
                type: 'warn',
                text: err.data.msg,
                time: 2000
              });
            });
        }else{
          this.$vux.toast.show({
            type: 'warn',
            text: '请输入正确的手机号码',
            time: 2000
          });  
        }
      }else{
        this.$vux.toast.show({
					type: 'warn',
					text: '手机号码不能为空',
					time: 2000
				});
      }
    },
    handleSubmitBindMobile(){
      let that = this;
      if(this.phone.trim() !== ''){
        if(this.phone.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/)){
          if(this.vcode.trim() !== ''){
            // 提交数据
            this.$http.post(`/user/cellphone/${this.phone}/openId/${getStore('wxcode')}/smscode/${this.vcode}/bind`)
              .then(({data})=>{
                if(data.status === '200'){
                  setStore('bindMobile',data.data.bindMobile)
                  if(data.data.couponInfo){
                    this.type = data.data.couponInfo.type
                    this.name = data.data.couponInfo.name
                    this.description = data.data.couponInfo.description
                    this.value = data.data.couponInfo.value
                    this.date = dateFormat(new Date(data.data.couponInfo.endDate),'YYYY-MM-DD')
                    if(data.data.isShow === 1){
                      this.show_modal = 'display:block'
                      this.setBindPhone(this.phone)
                    }
                  }else{
                    this.setBindPhone(this.phone)
                    this.$router.back(-1)
                  }
                }
              }).catch(err=>{
                this.$vux.toast.show({
                  type: 'warn',
                  text: '提交错误;错误的验证码',
                  time: 2000
                });
              });
          }else{
             this.$vux.toast.show({
              type: 'warn',
              text: '验证码不能为空',
              time: 2000
            });
          }
        }else{
          this.$vux.toast.show({
            type: 'warn',
            text: '请输入正确的手机号码',
            time: 2000
          });  
        }
      }else{
        this.$vux.toast.show({
					type: 'warn',
					text: '手机号码不能为空',
					time: 2000
				});
      }
    },
    handleDone(){
      this.$router.push({path:'/me/coupon'})
    }
  },
  beforeDestroy() {
    if(this.count === 0){
      clearInterval(this.interval);
      this.count = 59;
      this.isSend = false;
    }
  }
}
</script>
<style lang="css">
.info{
  padding:0rem .65rem;
}
.info p{
  font-size: 12px;
  color: #aaaaaa;
}
.info button{
  background-color: #2e976f;
  color: #fff;
  margin-top: .65rem;
}
.show_coupon{
  position: relative;
}
.show_coupon .weui-dialog.show_content{
  background-color: transparent !important;
}
.coupon_button{
  position: absolute;
  bottom: .8rem;
  left:  0rem;
}
.coupon_button >img{
  width: 80%;
  height: 100%;
}
.coupon_content{
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 100%;
}
.coupon_content > span{
  position: absolute;
  left: 1rem;
  top: 1.2rem;
  color: #fff;
  font-size: 18px;
}
.desc_right{
  position: absolute;
  right: 0rem;
  width: 60%;
}
.desc_right strong,.desc_right p{
  font-size: 16px;
}
.desc_right p{
  padding-top: .1rem;
  font-size: 14px;
  color: #aaaaaa;
}
</style>
